﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>event事件流</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div{
        	padding: 40px;
        }
        .div1{
        	background-color: red;
        }
        .div2{
        	background-color: blue;
        }
        .div3{
        	background-color: yellow;
        }
    </style>
</head>
<body>
<div class="div div1" id="j_div1">
	<div class="div div2" id="j_div2">
		<div class="div div3" id="j_div3"></div>
	</div>
</div>


<script type="text/javascript">
/*
 * 事件流： 跟样式无关，是根据结构嵌套有关
 * 1、事件冒泡：当一个元素接收到事件的时候，会把它接收到的所有事件传播给它的父级，一直到顶层，从里到外，就是事件中的冒泡机制。默认会存在的
 * 单独阻止冒泡:请使用 event.stopPropagation() 方法来代替event.cancelBubble不标准的属性.
 * 2、事件捕获：ie下没有的，在绑定事件中，标准下是有的
 * 
 * 事件函数绑定: 把一个函数赋值给一个事件 ，把一个东西和另一个东西关联就是绑定,它一共有两种形式。
 * */
    window.onload=function(){
       
        var oDiv1 = document.getElementById("j_div1");
        var oDiv2 = document.getElementById("j_div2");
        var oDiv3 = document.getElementById("j_div3");
		 	 
		 	function fn1(){
		 		alert(this.id);
		 	}
		 	function fn2(ev){
		 		var ev = ev || event;
		 		//ev.cancelBubble = true;
		 		ev.stopPropagation();
		 		alert(this.id);
		 	}
		 	function fn3(){
		 		alert(1+this);
		 	}
		 	function fn4(){
		 		alert(2);
		 	}
		 	//事件绑定的第一种形式：是给一个对象绑定的一个事件处理函数的第一种形式
		 	//oDiv1.onclick = fn1;//告诉DIV1如果它接收到了一个点击事件，它就去执行fn1
		  	//oDiv2.onclick = fn1;
		  	//oDiv3.onclick = fn2;  //并不影响oDiv1给oDiv2、oDiv3添加了点击事件
		  	oDiv1.addEventListener('click',fn1,true)
		  	oDiv2.addEventListener('click',fn1,false)
		  	oDiv3.addEventListener('click',fn1,true)

		  	
		}
</script>
</body>

</html>
